@keyframes example {
  from {
    @apply opacity-0;
    transform: scale(1.5);
  }

  to {
    @apply opacity-100;
    transform: scale(1);
  }
}

@keyframes leave {
  from {
    @apply opacity-100;
    transform: scale(1);
  }

  to {
    @apply opacity-0;
    transform: scale(1.5);
  }
}

.progress-container {
  @apply w-full h-4 flex items-center;

  .progress-bg {
    @apply h-1 rounded-sm relative;
    width: calc(100% - 70px);
    transition: all 0.3s;
    background-color: rgba(255, 255, 255, 0.3);

    &:hover {
      @apply h-2;

      .progress-played {
        @apply rounded-lg;
        background: linear-gradient(to right, var(--theme-color) 0%, green 20%, rgb(84, 84, 249) 100%);
      }

      .progress-scrubber {
        @apply block;
      }

      .progress-buffered {
        @apply rounded-lg;
      }
    }

    .progress-buffered {
      @apply w-0 h-full absolute top-0 left-0 rounded-sm z-1;
      background: rgba(255, 255, 255, 0.5);
    }

    .progress-played {
      @apply w-0 h-full absolute top-0 left-0 z-2 rounded bg-theme;
    }

    .progress-scrubber {
      @apply hidden w-4 h-4 absolute top-2/4 bg-white z-3;
      transform: translate(-8px, -50%);
      border-radius: 50%;
    }

    .progress-seek-mask {
      @apply w-full absolute left-0 z-2;
      height: calc(100% + 6px);
      top: -3px;

      &:hover {
        @apply cursor-pointer;
      }
    }

    .video-current-time {
      @apply absolute left-0 text-xs text-white;
      top: -30px;
      transform: translateX(-50%);
      background-color: #222222;
      padding: 4px 10px;
      border-radius: 20px;
    }
  }

  .duration {
    @apply text-white text-sm leading-4 text-right;
    width: 70px;
  }
}

@media screen and (max-width: 767px) {
  .progress-container {
    @apply w-full h-4 flex items-center justify-between;

    .progress-bg {
      width: calc(100% - 60px);
    }

    .duration {
      @apply text-xs leading-3 w-fit whitespace-nowrap;
      width: 48px;
    }
  }
}
